
<template>
  <div class="search-page">
    <!-- 搜索框 -->
    <div class="search-bar" >
      <input v-model="goodsList.goods_name" placeholder="请输入商品名称"  size="default" style="width: 60%;height: 30px" />
      &nbsp;&nbsp;
      <button default  @click="search" style="width: 60px;height: 30px;background-color: #4ea7f9">搜索</button>
    </div>

    <!-- 筛选功能 -->
    <div class="filter-container">
      <div class="filter-bar">
        <button style="width: 60px;height: 30px;background-color: #4ea7f9" @click="filterGoods('1')">0-100</button>&nbsp;&nbsp;
        <button style="width: 65px;height: 30px;background-color: #4ea7f9" @click="filterGoods('2')">100-200</button>&nbsp;&nbsp;
        <button style="width: 65px;height: 30px;background-color: #4ea7f9" @click="filterGoods('3')">200以上</button>&nbsp;&nbsp;
        <button style="width: 70px;height: 30px;background-color: #4ea7f9" @click="filterGoods('4')">全部区间</button>&nbsp;&nbsp;
        <span class="demonstration" style="font-size:large">发布时间</span>
        <el-date-picker
            v-model="goodsList1.goods_post"
            type="date"
            placeholder="日期"
            style="width: 150px"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            clearable
        />&nbsp;&nbsp;
        <span class="demonstration" style="font-size:large">品牌</span>
        <el-select v-model="goodsList1.category_id" placeholder="" style="width: 100px" clearable>
          <el-option label="POPOMART" value="1" />
          <el-option label="DIMOO" value="2" />
          <el-option label="LABUBU" value="3" />
          <el-option label="FARMER BOB" value="4" />
          <el-option label="Hirono" value="5" />
          <el-option label="Shinwoo" value="6" />
          <el-option label="Rico" value="9" />
          <el-option label="PINO JELLY" value="13" />
          <el-option label="Laura" value="14" />
        </el-select>&nbsp;&nbsp;
        <button style="width: 60px;height: 30px;background-color: #4ea7f9" @click="onSubmit">筛选</button>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="product-list">

      <div  v-for="goods in GoodsInfo" :key="goods.goods_id" class="product-item">
        <router-link :to="{name:'GoodsDetails',params:{goodsId:goods.goods_id,categoryId:goods.category_id} }">
          <img :src="'http://localhost:8080/image/upload/'+goods.goods_image"   alt="goods_image"/>
        </router-link>
        <div class="product-info">
          <h3>{{ goods.goods_name }}</h3>
          <p>商品描述：{{ goods.goods_description }}</p>
           <p>价格：{{ goods.goods_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      goodsList1:{
        goods_post:null,
        category_id:null
      },
      goodsList:{
        goods_name:null,
      },
      GoodsInfo: [],
      GoodsInfo1:[]
    };
  },
  methods: {
    //进行传值数据处理
    Parameter( ){
      if(this.$route.params.goodsName!=null){
        this.goodsList.goods_name=this.$route.params.goodsName;
      }
      return this.goodsList.goods_name;
    },
    LoadGoodsData() {
      this.$http.get("http://localhost:8080/goods/query", {
            params: {
              name: this.Parameter()
            }
          }
      ).then((res) => {
        this.GoodsInfo = res.data;
        console.log(this.GoodsInfo);
        this.$route.params.goodsName=null
      }).catch(function (err) {
        console.log(err)
      })
    },
    filterGoods(index) {

      let filteredGoods = [];
      switch (index) {
        case '1':
          filteredGoods = this.GoodsInfo.filter(item => item.goods_price > 0 && item.goods_price <= 100);
          break;
        case '2':
          filteredGoods = this.GoodsInfo.filter(item => item.goods_price >100 && item.goods_price <= 200);
          break;
        case '3':
          filteredGoods = this.GoodsInfo.filter(item => item.goods_price > 200);
          break;
        case '4':
          filteredGoods=this.GoodsInfo;
          break;
        default:
          filteredGoods = this.GoodsInfo; // 默认显示所有商品
      }
      this.GoodsInfo = filteredGoods;
      // 更新数据，Vue 会自动重新渲染
    },
    LoadPostCategoryData() {
      this.$http.get("http://localhost:8080/goods/queryPostCategory", {
            params: {
             goods_post: this.goodsList1.goods_post,
              category_id: this.goodsList1.category_id,
            }
          }
      ).then((res) => {
        this.GoodsInfo1= res.data;
        console.log(this.GoodsInfo1);
      }).catch(function (err) {
        console.log(err)
      })
    },
  search() {
      console.log(this.goodsList);
      this.LoadGoodsData();
    },
    onSubmit(){
      console.log(this.goodsList1);
      this.LoadPostCategoryData();
    }
  },
  mounted() {
    this.LoadGoodsData();
    this.LoadPostCategoryData();
  }
};
</script>

<style >
.search-page {
  max-width: 80%;
  margin: 0 auto;
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 50px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 500px;
}

.product-info {
  margin-top: 10px;
}

.filter-bar {
  margin-top: 0;
  margin-bottom: 20px;
}
.filter-container {
  display: flex;
  margin-left: 30%;
}

</style>